<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
		<title>Atmosphere Play Chat</title>
        	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
        
        	<!-- Atmosphere -->
        	<script type="text/javascript" src="https://rawgithub.com/Atmosphere/atmosphere-javascript/master/modules/javascript/src/main/webapp/javascript/atmosphere.js"></script>
		
		<!-- Application -->
		<script type="text/javascript">
		$(function () {
			"use strict";
			
			var header = $('#header');
			var content = $('#content');
			var input = $('#input');
			var status = $('#status');
			var myName = false;
			var author = null;
			var logged = false;
			var socket = atmosphere;
			var subSocket;
			var transport = 'websocket';
			
			// We are now ready to cut the request
			var request = { 
				url: document.location.toString() + 'chat',
				contentType : "application/json",
				logLevel : 'debug',
				transport : transport ,
				trackMessageLength : true,
				reconnectInterval : 5000,
				fallbackTransport: 'long-polling'};
			
			
			request.onOpen = function(response) {
				content.html($('<p>', { text: 'Atmosphere connected using ' + response.transport }));
				input.removeAttr('disabled').focus();
				status.text('Choose name:');
				transport = response.transport;
			};
			
			request.onReopen = function(response) {
				input.removeAttr('disabled').focus();
				content.html($('<p>', { text: 'Atmosphere re-connected using ' + response.transport }));
			};
			
			// For demonstration of how you can customize the fallbackTransport using the onTransportFailure function
			request.onTransportFailure = function(errorMsg, request) {
				atmosphere.util.info(errorMsg);
				if (window.EventSource) {
					request.fallbackTransport = "sse";
				}
				header.html($('<h3>', { text: 'Atmosphere Chat. Default transport is WebSocket, fallback is ' + request.fallbackTransport }));
			};
			
			request.onMessage = function (response) {
				var message = response.responseBody;
				try {
					var json = JSON.parse(message);
				} catch (e) {
					console.log('This doesn\'t look like a valid JSON: ', message);
					return;
				}
				
				input.removeAttr('disabled').focus();
				if (!logged && myName) {
					logged = true;
					status.text(myName + ': ').css('color', 'blue');
				} else {
					var me = json.author == author;
					var date = typeof(json.time) == 'string' ? parseInt(json.time) : json.time;
				 	addMessage(json.author, json.message, me ? 'blue' : 'black', new Date(date));
				}
			};
			
			request.onClose = function(response) {
				content.html($('<p>', { text: 'Client closed the connection after a timeout' }));
				subSocket.push(JSON.stringify({ author: author, message: 'disconnecting' }));
				input.attr('disabled', 'disabled');
			};
			
			request.onError = function(response) {
				content.html($('<p>', { text: 'Sorry, but there\'s some problem with your '
			 	+ 'socket or the server is down' }));
				logged = false;
			};
			
			request.onReconnect = function(request, response) {
				content.html($('<p>', { text: 'Connection lost, trying to reconnect. Trying to reconnect ' + request.reconnectInterval}));
				input.attr('disabled', 'disabled');
			};
			
			subSocket = socket.subscribe(request);
			
			input.keydown(function(e) {
				if (e.keyCode === 13) {
				var msg = $(this).val();
			
			 	// First message is always the author's name
			 	if (author == null) {
			     		author = msg;
			 	}
			
			 	subSocket.push(JSON.stringify({ author: author, message: msg }));
			 	$(this).val('');
			
			 	input.attr('disabled', 'disabled');
			 	if (myName === false) {
			     		myName = msg;
				}
			}
			});
			
			function addMessage(author, message, color, datetime) {
				content.append('<p><span style="color:' + color + '">' + author + '</span> &#64; ' +
			 		+ (datetime.getHours() < 10 ? '0' + datetime.getHours() : datetime.getHours()) + ':'
			 		+ (datetime.getMinutes() < 10 ? '0' + datetime.getMinutes() : datetime.getMinutes())
			 		+ ': ' + message + '</p>');
			}
		});
	</script>
   	<style>
        * {
            font-family: tahoma;
            font-size: 12px;
            padding: 0px;
            margin: 0px;
        }

        p {
            line-height: 18px;
        }

        div {
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        #content {
            padding: 5px;
            background: #ddd;
            border-radius: 5px;
            border: 1px solid #CCC;
            margin-top: 10px;
        }

        #header {
            padding: 5px;
            background: #f5deb3;
            border-radius: 5px;
            border: 1px solid #CCC;
            margin-top: 10px;
        }

        #input {
            border-radius: 2px;
            border: 1px solid #ccc;
            margin-top: 10px;
            padding: 5px;
            width: 400px;
        }

        #status {
            width: 88px;
            display: block;
            float: left;
            margin-top: 15px;
        }
    </style>
</head>
<body>
<div id="header"><h3>Atmosphere Chat. Default transport is WebSocket, fallback is long-polling</h3></div>
<div id="content"></div>
<div>
    <span id="status">Connecting...</span>
    <input type="text" id="input" disabled="disabled"/>
</div>

</body>
</html>
